import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { Carousel, WingBlank } from 'antd-mobile';

// 引css
import "./mine.css"
// 引actions以及导出的方法
import { actions, getBanner } from "../../store/modules/mine"
class Mine extends Component {
    render() {
        let { banner } = this.props
        console.log(banner);
        return (
            <div className="pad">
                <div className="bg">
                    <header>
                        <div>
                            <img src="" alt="" />
                            <div>
                                <p>代用名</p>
                                <p>完善资料让小U更懂您</p>
                            </div>
                        </div>
                        <div>
                            <img src="" alt="" />
                            <p>每日签到</p>
                        </div>
                    </header>
                    <nav>
                        <div>
                            <p>12</p>
                            <p>我的收藏</p>
                        </div>
                        <div>
                            <p>12</p>
                            <p>浏览记录</p>
                        </div>
                        <div>
                            <p>￥0</p>
                            <p>我的红包</p>
                        </div>
                        <div>
                            <p>12</p>
                            <p>优惠券</p>
                        </div>
                    </nav>
                    <div className="mine_content1">
                        <div>
                            <div>我的订单</div>
                            <a href="">全部订单></a>
                        </div>
                        <ul>
                            <li>
                                <img src="" alt="" />
                                <p>待付款</p>
                            </li>
                            <li>
                                <img src="" alt="" />
                                <p>待收货</p>
                            </li>
                            <li>
                                <img src="" alt="" />
                                <p>评价</p>
                            </li>
                            <li>
                                <img src="" alt="" />
                                <p>售后/退款</p>
                            </li>
                        </ul>
                    </div>
                    <div className="mine_banner">
                        <ul>
                            {
                                    <WingBlank>
                                    <Carousel
                                      autoplay={false}
                                      infinite
                                      beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                                      afterChange={index => console.log('slide to', index)}
                                    >
                                      {banner.map(val => (
                                        <a
                                          key={val}
                                          href="http://www.alipay.com"
                                          style={{ display: 'inline-block', width: '100%', height: "100px" }}
                                        >
                                          <img
                                            src={val.img}
                                            alt=""
                                            style={{ width: '100%', verticalAlign: 'top' }}
                                            onLoad={() => {
                                              window.dispatchEvent(new Event('resize'));
                                              this.setState({ imgHeight: 'auto' });
                                            }}
                                          />
                                        </a>
                                      ))}
                                    </Carousel>
                                  </WingBlank>
                            }
                        </ul>
                    </div>
                    <ul className="mine_content2">
                        <li>
                            <div>
                                <img src="" alt="" />
                                <p>地址管理</p>
                            </div>
                            <div>
                                <img src="" alt="" />
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="" alt="" />
                                <p>我的钱包</p>
                            </div>
                            <div>
                                <p>剩余200U币</p>
                                <img src="" alt="" />
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="" alt="" />
                                <p>我的二维码</p>
                            </div>
                            <div>
                                <img src="" alt="" />
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="" alt="" />
                                <p>我的小伙伴</p>
                            </div>
                            <div>
                                <img src="" alt="" />
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="" alt="" />
                                <p>0元试用</p>
                            </div>
                            <div>
                                <img src="" alt="" />
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
    componentDidMount() {
        let { reqGetbanner } = this.props.mine
        reqGetbanner()
    }
}

let mapStateToProps = (state) => ({
    banner: getBanner(state)
});
let mapDispatchToProps = (dispatch) => ({
    mine: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Mine)
